import { defineComponent, reactive, ref } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import Search from "@/components/Search";
import { IFilterMenuChoose, IFilterMenuPropsData } from "@/components/FilterMenu/types";
import FilterMenu from "@/components/FilterMenu";
import FixButtonGroup from "@/components/FixButtonGroup";
import ListView from "@/components/ListView";
import GoodsListItem from "@/components/GoodsListItem";
import Text from "@/components/Text";
import { getUserInfoUrl } from "@/command/apiTool";
import { Divider, Popup } from "vant";
import PopTitle from "@/components/PopTitle";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import PopCheck from "@/components/PopupCheck";
import ButtonView from "@/components/ButtonView";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import router from "@/router";
export default defineComponent({
  name: "",
  setup() {
    const form = reactive({});
    const popup = ref(false);
    const render1 = () => {
      // const data: IFilterMenuPropsData[] = [
      //   {
      //     title: "区域",
      //     type: "menu",
      //     key: "a1",
      //     data: [
      //       {
      //         text: "宁波",
      //         value: "1",
      //       },
      //     ],
      //   },
      //   {
      //     title: "种植品类",
      //     type: "menu",
      //     key: "a2",
      //     data: [
      //       {
      //         text: "番茄",
      //         value: "1",
      //       },
      //     ],
      //   },
      // ];
      const data: IFilterMenuChoose[] = [
        // { type: "area", key: "code" },
        { type: "productType", key: "productId" ,title:'品种类型'}
      ];
      return (
        <div
          class={"mx-[-15px] mt-[-20px]"}
          style={{
            backgroundColor: "#fff",
            boxShadow: "0px 2px 3px 1px rgba(0,0,0,0.03)",
          }}
        >
          <FilterMenuSearch
            choose={data}
            v-model={form}
            searchKey="name"
          />
          
        </div>
      );
    };
    const renderItem = (e: any) => {
      const rightBody = () => {
        return <Text>{e.comment}</Text>;
      };
      return (
        <div class="bg-white" onClick={()=>router.push(`varietyDetails?id=${e.id}`)}>
          <GoodsListItem
            title={e.name}
            v-slots={{ rightBody: rightBody }}
            class="variety-xh-item"
            img={e.img}
          />
          <Divider />
        </div>
      );
    };
    const render3 = () => {
      return (
        <ListView
          {...getUserInfoUrl({
            dh: "",
            xh: "/api/H5/skill/product/small/seedHall",
          },form)}
          renderItem={renderItem}
        />
      );
    };
    const render4 = () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "发布申请代购",
          block: true,
          onClick: () => {
            popup.value = true;
          },
        },
      ];
      return <FixButtonGroup data={data} />;
    };
    // const render5 = () => {
    //   const data = [
    //     {
    //       name: "测试",
    //       url: "https://img2.baidu.com/it/u=521500431,1866517709&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680109200&t=661941a42706ba39f208f57500244ca7",
    //     },
    //     {
    //       name: "测试",
    //       url: "https://img2.baidu.com/it/u=521500431,1866517709&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680109200&t=661941a42706ba39f208f57500244ca7",
    //     },
    //   ];
    //   return (
    //     <Popup v-model:show={popup.value} round position="bottom">
    //       <PopTitle title="选择代购大户" />
    //       <PopCheck data={data} />
    //       <div
    //         class="h-[64px] w-full flex items-center justify-center px-[14px] box-border"
    //         style={{ boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.16)" }}
    //       >
    //         <ButtonView class="!h-[40px]" block>
    //           一键分配
    //         </ButtonView>
    //       </div>
    //     </Popup>
    //   );
    // };
    return () => {
      return (
        <PageTitle
          title="种子大厅"
          bgColor="white"
          // class="pb-[150px]"
          childClass={"p-14 pt-20 pb-20 bg-[#FFFFFF]"}
        >
          {render1()}
          {render3()}
          {/* render4() */}
          {/* render5() */}
        </PageTitle>
      );
    };
  },
});
